<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var Person = function (ctx) {
        /*绘制工具*/
        this.ctx = ctx || document.querySelector('canvas').getContext('2d');
        /*图片路径*/
        this.src = './images/2.jpg';
        /*画布的大小*/
        this.canvasWidth = this.ctx.canvas.width;
        this.canvasHeight = this.ctx.canvas.height;

        /*行走的相关参数*/
        this.stepSize = 10;
        this.direction = 0; // 0 前 1 左 2 右 3 后
        /*x，y轴方向的偏移步数*/
        this.stepX = 0;
        this.stepY = 0;
        // 初始化
        this.init();
    };

    Person.prototype.init = function () {
        var that = this;
        /*1.加载图片*/
        this.loadImage(function (image) {
            that.imageWidth = image.width;
            that.imageHeight = image.height;
            /*人物的大小*/
            that.personWidth = that.imageWidth / 4;
            that.personHeight = that.imageHeight / 4;
            /*绘制图片的起点*/
            that.x0 = that.canvasWidth / 2 - that.personWidth / 2;
            that.y0 = that.canvasHeight / 2 - that.personHeight / 2;
            /*2.默认绘制在中心位置正面朝外*/
            that.ctx.drawImage(
                image,
                0,0,
                that.personWidth,that.personHeight,
                that.x0,that.y0,
                that.personWidth,that.personHeight
            );
            /*3.能通过方向键去控制人物的行走*/
            that.index = 0;
            document.onkeydown = function (e) {
                // console.log(e.keyCode);
                if(e.keyCode == 38) {
                    /*上*/
                    that.index ++;
                    that.direction = 0;
                    that.stepY --;
                    that.drawNewImage(image);
                } else if (e.keyCode == 37) {
                    /*左*/
                    that.index ++;
                    that.direction = 1;
                    that.stepX --;
                    that.drawNewImage(image);
                } else if (e.keyCode == 39) {
                    /*右*/
                    that.index ++;
                    that.direction = 2;
                    that.stepX ++;
                    that.drawNewImage(image);
                } else if (e.keyCode == 40) {
                    /*下*/
                    that.index ++;
                    that.direction = 3;
                    that.stepY ++;
                    that.drawNewImage(image);
                }
            }
        });

    };
    /*加载图片*/
    Person.prototype.loadImage = function (callback) {
        var image = new Image();
        image.onload = function () {
            callback && callback(image);
        };
        image.src = this.src;
    };

    Person.prototype.drawNewImage = function (image) {
        /*先清除画布*/
        this.ctx.clearRect(0,0,this.canvasWidth,this.canvasHeight);
        /*在精灵图上的定位 x 索引 */
        /*在精灵图上的定位 y 方向 */
        this.ctx.drawImage(
            image,
            this.index * this.personWidth,this.direction * this.personHeight,
            this.personWidth,this.personHeight,
            this.x0 + this.stepX * this.stepSize,this.y0 + this.stepY * this.stepSize,
            this.personWidth,this.personHeight
        );
        /*如果索引超出了 变成0*/
        if(this.index >=3) {
            this.index = 0;
        }
    };

    new Person();
</script>
</body>
</html>
